<template>
  <div id="root">
    <h1>分析生命周期</h1>
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
</template>

<script>
export default {
  name: "FenXiShengMingZhouQi",
  data() {
    return {
      n: 1
    }
  },
  methods: {
    add() {
      console.log('add')
      this.n++
    },
    bye() {
      console.log('bye')
      this.$destroy()
    },
  },
  watch: {
    n() {
      console.log('n变了')
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
   console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('update')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<style scoped>

</style>
